<!DOCTYPE html>
<html lang="en">
<head prefix="og: http://ogp.me/ns#">
  <meta charset="utf-8">
  <title>Asset Folders | Hexo</title>
  <meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <!-- Canonical links -->
  <link rel="canonical" href="https://hexo.io/docs/asset-folders.html">
  <!-- Alternative links -->
  
    
      <link rel="alternative" hreflang="en" href="https://hexo.io/docs/asset-folders.html">
    
      <link rel="alternative" hreflang="zh-tw" href="https://hexo.io/zh-tw/docs/asset-folders.html">
    
      <link rel="alternative" hreflang="zh-cn" href="https://hexo.io/zh-cn/docs/asset-folders.html">
    
      <link rel="alternative" hreflang="ru" href="https://hexo.io/ru/docs/asset-folders.html">
    
      <link rel="alternative" hreflang="ko" href="https://hexo.io/ko/docs/asset-folders.html">
    
  
  <!-- Icon -->
  <link rel="apple-touch-icon" sizes="57x57" href="/icon/apple-touch-icon-57x57.png">
  <link rel="apple-touch-icon" sizes="114x114" href="/icon/apple-touch-icon-114x114.png">
  <link rel="apple-touch-icon" sizes="72x72" href="/icon/apple-touch-icon-72x72.png">
  <link rel="apple-touch-icon" sizes="144x144" href="/icon/apple-touch-icon-144x144.png">
  <link rel="apple-touch-icon" sizes="60x60" href="/icon/apple-touch-icon-60x60.png">
  <link rel="apple-touch-icon" sizes="120x120" href="/icon/apple-touch-icon-120x120.png">
  <link rel="apple-touch-icon" sizes="76x76" href="/icon/apple-touch-icon-76x76.png">
  <link rel="apple-touch-icon" sizes="152x152" href="/icon/apple-touch-icon-152x152.png">
  <link rel="icon" type="image/png" href="/icon/favicon-196x196.png" sizes="196x196">
  <link rel="icon" type="image/png" href="/icon/favicon-160x160.png" sizes="160x160">
  <link rel="icon" type="image/png" href="/icon/favicon-96x96.png" sizes="96x96">
  <link rel="icon" type="image/png" href="/icon/favicon-16x16.png" sizes="16x16">
  <link rel="icon" type="image/png" href="/icon/favicon-32x32.png" sizes="32x32">
  <meta name="msapplication-TileColor" content="#2f83cd">
  <meta name="msapplication-TileImage" content="/icon/mstile-144x144.png">
  <!-- CSS -->
  <!-- build:css build/css/navy.css -->
  <link rel="stylesheet" href="/css/navy.css">
  <!-- endbuild -->
  <link href="https://fonts.googleapis.com/css?family=Lato:300,400,700" rel="stylesheet" type="text/css">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.css">
  <!-- RSS -->
  <link rel="alternate" href="/atom.xml" title="Hexo">
  <!-- Open Graph -->
  <meta name="description" content="Global Asset FolderAssets are non-post files in the source folder, such as images, CSS or JavaScript files. For instance, If you are only going to have a few images in the Hexo project, then the easie">
<meta property="og:type" content="website">
<meta property="og:title" content="Asset Folders">
<meta property="og:url" content="https://hexo.io/docs/asset-folders.html">
<meta property="og:site_name" content="Hexo">
<meta property="og:description" content="Global Asset FolderAssets are non-post files in the source folder, such as images, CSS or JavaScript files. For instance, If you are only going to have a few images in the Hexo project, then the easie">
<meta property="og:locale" content="en">
<meta property="og:updated_time" content="2017-12-06T21:52:16.000Z">
<meta name="twitter:card" content="summary">
<meta name="twitter:title" content="Asset Folders">
<meta name="twitter:description" content="Global Asset FolderAssets are non-post files in the source folder, such as images, CSS or JavaScript files. For instance, If you are only going to have a few images in the Hexo project, then the easie">
<meta name="twitter:site" content="hexojs">
<meta property="fb:admins" content="100000247608790">
  <!-- Google Analytics -->
  
<script>
  (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
  (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
  m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
  })(window,document,'script','https://www.google-analytics.com/analytics.js','ga');

  ga('create', 'UA-48498357-3', 'auto');
  ga('send', 'pageview');
</script>

</head>

<body>
  <div id="container">
    <header id="header" class="wrapper">
  <div id="header-inner" class="inner">
    <h1 id="logo-wrap">
      <a href="/" id="logo">Hexo</a>
    </h1>
    <nav id="main-nav">
      <a href="/docs/" class="main-nav-link">Docs</a><a href="/api/" class="main-nav-link">API</a><a href="/news/" class="main-nav-link">News</a><a href="/plugins/" class="main-nav-link">Plugins</a><a href="/themes/" class="main-nav-link">Themes</a>
      <a href="https://github.com/hexojs/hexo" class="main-nav-link"><i class="fa fa-github-alt"></i></a>
      <div id="search-input-wrap">
        <div id="search-input-icon">
          <i class="fa fa-search"></i>
        </div>
        <input type="search" id="search-input" placeholder="Search...">
      </div>
    </nav>
    <div id="lang-select-wrap">
      <label id="lang-select-label"><i class="fa fa-globe"></i><span>English</span></label>
      <select id="lang-select" data-canonical="docs/asset-folders.html">
        
          <option value="en" selected>English</option>
        
          <option value="zh-tw">正體中文</option>
        
          <option value="zh-cn">简体中文</option>
        
          <option value="ru">Русский</option>
        
          <option value="ko">한국어</option>
        
      </select>
    </div>
    <a id="mobile-nav-toggle">
      <span class="mobile-nav-toggle-bar"></span>
      <span class="mobile-nav-toggle-bar"></span>
      <span class="mobile-nav-toggle-bar"></span>
    </a>
  </div>
</header>

    <div id="content-wrap">
  <div id="content" class="wrapper">
    <div id="content-inner">
      <article class="article-container" itemscope itemtype="http://schema.org/Article">
        <div class="article-inner">
          <div class="article">
            <div class="inner">
              <header class="article-header">
                <h1 class="article-title" itemprop="name">Asset Folders</h1>
                <a href="https://github.com/hexojs/site/edit/master/source/docs/asset-folders.md" class="article-edit-link" title="Improve this doc"><i class="fa fa-pencil"></i></a>
              </header>
              <div class="article-content" itemprop="articleBody">
                <h2 id="Global-Asset-Folder" class="article-heading"><a href="#Global-Asset-Folder" class="headerlink" title="Global Asset Folder"></a>Global Asset Folder<a class="article-anchor" href="#Global-Asset-Folder" aria-hidden="true"></a></h2><p>Assets are non-post files in the <code>source</code> folder, such as images, CSS or JavaScript files. For instance, If you are only going to have a few images in the Hexo project, then the easiest way is to keep them in a <code>source/images</code> directory. Then, you can access them using something like <code>![](/images/image.jpg)</code>.</p>
<h2 id="Post-Asset-Folder" class="article-heading"><a href="#Post-Asset-Folder" class="headerlink" title="Post Asset Folder"></a>Post Asset Folder<a class="article-anchor" href="#Post-Asset-Folder" aria-hidden="true"></a></h2><div class="video-container"><iframe src="//www.youtube.com/embed/feIDVQ2tz0o" frameborder="0" allowfullscreen></iframe></div>
<p>For users who expect to regularly serve images and/or other assets, and for those who prefer to separate their assets on a post-per-post basis, Hexo also provides a more organized way to manage assets. This slightly more involved, but very convenient approach to asset management can be turned on by setting the <code>post_asset_folder</code> setting in <code>_config.yml</code> to true.</p>
<figure class="highlight yaml"><figcaption><span>_config.yml</span></figcaption><table><tr><td class="code"><pre><span class="line"><span class="attr">post_asset_folder:</span> <span class="literal">true</span></span><br></pre></td></tr></table></figure>
<p>With asset folder management enabled, Hexo will create a folder every time you make a new post with the <code>hexo new [layout] &lt;title&gt;</code> command. This asset folder will have the same name as the markdown file associated with the post. Place all assets related to your post into the associated folder, and you will be able to reference them using a relative path, making for an easier and more convenient workflow.</p>
<h2 id="Tag-Plugins-For-Relative-Path-Referencing" class="article-heading"><a href="#Tag-Plugins-For-Relative-Path-Referencing" class="headerlink" title="Tag Plugins For Relative Path Referencing"></a>Tag Plugins For Relative Path Referencing<a class="article-anchor" href="#Tag-Plugins-For-Relative-Path-Referencing" aria-hidden="true"></a></h2><p>Referencing images or other assets using normal markdown syntax and relative paths may cause them to display incorrectly on archive or index pages. Plugins have been created by the community to address this issue in Hexo 2. However, with the release of Hexo 3, several new tag plugins were added to core. These enable you to reference your assets more easily in posts:</p>
<figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">&#123;% asset_path slug %&#125;</span><br><span class="line">&#123;% asset_img slug [title] %&#125;</span><br><span class="line">&#123;% asset_link slug [title] %&#125;</span><br></pre></td></tr></table></figure>
<p>For example, with post asset folders enabled, if you place an image <code>example.jpg</code> into your asset folder, it will <em>not</em> appear on the index page if you reference it using a relative path with regular <code>![](/example.jpg)</code> markdown syntax (however, it will work as expected in the post itself).</p>
<p>The correct way to reference the image will thus be to use tag plugin syntax rather than markdown:</p>
<figure class="highlight plain"><table><tr><td class="code"><pre><span class="line">&#123;% asset_img example.jpg This is an example image %&#125;</span><br><span class="line">&#123;% asset_img &quot;spaced asset.jpg&quot; &quot;spaced title&quot; %&#125;</span><br></pre></td></tr></table></figure>
<p>This way, the image will appear both inside the post and on index and archive pages.</p>

              </div>
              <footer class="article-footer">
                <time class="article-footer-updated" datetime="2017-12-06T21:52:16.000Z" itemprop="dateModified">Last updated: 2017-12-06</time>
                <a href="tag-plugins.html" class="article-footer-prev" title="Tag Plugins"><i class="fa fa-chevron-left"></i><span>Prev</span></a><a href="data-files.html" class="article-footer-next" title="Data Files"><span>Next</span><i class="fa fa-chevron-right"></i></a>
              </footer>
              
<section id="comments">
  <div id="disqus_thread"></div>
</section>
<script>
  var disqus_shortname = 'hexojs';
  var disqus_url = 'https://hexo.io/docs/asset-folders.html';
  var disqus_title = "Asset Folders";
  var disqus_config = function(){
    this.language = 'en';
  };
  (function(){
    var dsq = document.createElement('script'); dsq.type = 'text/javascript'; dsq.async = true;
    dsq.src = 'https://go.disqus.com/embed.js';
    (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq);
  })();
</script>

            </div>
          </div>
          <aside id="article-toc" role="navigation">
            <div id="article-toc-inner">
              <script async type="text/javascript" src="//cdn.carbonads.com/carbon.js?zoneid=1673&serve=C6AILKT&placement=hexoio" id="_carbonads_js"></script>
              <strong class="sidebar-title">Contents</strong>
              <ol class="toc"><li class="toc-item toc-level-2"><a class="toc-link" href="#Global-Asset-Folder"><span class="toc-text"><a href="#Global-Asset-Folder" class="headerlink" title="Global Asset Folder"></a>Global Asset Folder</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#Post-Asset-Folder"><span class="toc-text"><a href="#Post-Asset-Folder" class="headerlink" title="Post Asset Folder"></a>Post Asset Folder</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#Tag-Plugins-For-Relative-Path-Referencing"><span class="toc-text"><a href="#Tag-Plugins-For-Relative-Path-Referencing" class="headerlink" title="Tag Plugins For Relative Path Referencing"></a>Tag Plugins For Relative Path Referencing</span></a></li></ol>
              <a href="#" id="article-toc-top">Back to Top</a>
            </div>
          </aside>
        </div>
      </article>
      <aside id="sidebar" role="navigation">
  <div class="inner">
    <strong class="sidebar-title">Getting Started</strong><a href="index.html" class="sidebar-link">Overview</a><a href="setup.html" class="sidebar-link">Setup</a><a href="configuration.html" class="sidebar-link">Configuration</a><a href="commands.html" class="sidebar-link">Commands</a><a href="migration.html" class="sidebar-link">Migration</a><strong class="sidebar-title">Basic Usage</strong><a href="writing.html" class="sidebar-link">Writing</a><a href="front-matter.html" class="sidebar-link">Front-matter</a><a href="tag-plugins.html" class="sidebar-link">Tag Plugins</a><a href="asset-folders.html" class="sidebar-link current">Asset Folders</a><a href="data-files.html" class="sidebar-link">Data Files</a><a href="server.html" class="sidebar-link">Server</a><a href="generating.html" class="sidebar-link">Generating</a><a href="deployment.html" class="sidebar-link">Deployment</a><strong class="sidebar-title">Customization</strong><a href="permalinks.html" class="sidebar-link">Permalinks</a><a href="themes.html" class="sidebar-link">Themes</a><a href="templates.html" class="sidebar-link">Templates</a><a href="variables.html" class="sidebar-link">Variables</a><a href="helpers.html" class="sidebar-link">Helpers</a><a href="internationalization.html" class="sidebar-link">Internationalization (i18n)</a><a href="plugins.html" class="sidebar-link">Plugins</a><strong class="sidebar-title">Miscellaneous</strong><a href="troubleshooting.html" class="sidebar-link">Troubleshooting</a><a href="contributing.html" class="sidebar-link">Contributing</a>
  </div>
</aside>
    </div>
  </div>
</div>

    <footer id="footer" class="wrapper">
  <div class="inner">
    <div id="footer-copyright">
      &copy; 2017 <a href="https://github.com/hexojs/hexo/graphs/contributors" target="_blank">Hexo</a><br>
      Documentation licensed under <a href="http://creativecommons.org/licenses/by/4.0/" target="_blank">CC BY 4.0</a>.
    </div>
    <div id="footer-links">
      <a href="https://twitter.com/hexojs" class="footer-link" target="_blank"><i class="fa fa-twitter"></i></a>
      <a href="https://github.com/hexojs/hexo" class="footer-link" target="_blank"><i class="fa fa-github-alt"></i></a>
    </div>
  </div>
</footer>

  </div>
  <div id="mobile-nav-dimmer"></div>
  <nav id="mobile-nav">
  <div id="mobile-nav-inner">
    <ul id="mobile-nav-list">
      <a href="/docs/" class="mobile-nav-link">Docs</a><a href="/api/" class="mobile-nav-link">API</a><a href="/news/" class="mobile-nav-link">News</a><a href="/plugins/" class="mobile-nav-link">Plugins</a><a href="/themes/" class="mobile-nav-link">Themes</a>
      <li class="mobile-nav-item">
        <a href="https://github.com/hexojs/hexo" class="mobile-nav-link" rel="external" target="_blank">GitHub</a>
      </li>
    </ul>
    
      <strong class="mobile-nav-title">Getting Started</strong><a href="index.html" class="mobile-nav-link">Overview</a><a href="setup.html" class="mobile-nav-link">Setup</a><a href="configuration.html" class="mobile-nav-link">Configuration</a><a href="commands.html" class="mobile-nav-link">Commands</a><a href="migration.html" class="mobile-nav-link">Migration</a><strong class="mobile-nav-title">Basic Usage</strong><a href="writing.html" class="mobile-nav-link">Writing</a><a href="front-matter.html" class="mobile-nav-link">Front-matter</a><a href="tag-plugins.html" class="mobile-nav-link">Tag Plugins</a><a href="asset-folders.html" class="mobile-nav-link current">Asset Folders</a><a href="data-files.html" class="mobile-nav-link">Data Files</a><a href="server.html" class="mobile-nav-link">Server</a><a href="generating.html" class="mobile-nav-link">Generating</a><a href="deployment.html" class="mobile-nav-link">Deployment</a><strong class="mobile-nav-title">Customization</strong><a href="permalinks.html" class="mobile-nav-link">Permalinks</a><a href="themes.html" class="mobile-nav-link">Themes</a><a href="templates.html" class="mobile-nav-link">Templates</a><a href="variables.html" class="mobile-nav-link">Variables</a><a href="helpers.html" class="mobile-nav-link">Helpers</a><a href="internationalization.html" class="mobile-nav-link">Internationalization (i18n)</a><a href="plugins.html" class="mobile-nav-link">Plugins</a><strong class="mobile-nav-title">Miscellaneous</strong><a href="troubleshooting.html" class="mobile-nav-link">Troubleshooting</a><a href="contributing.html" class="mobile-nav-link">Contributing</a>
    
  </div>
  <div id="mobile-lang-select-wrap">
    <span id="mobile-lang-select-label"><i class="fa fa-globe"></i><span>English</span></span>
    <select id="mobile-lang-select" data-canonical="docs/asset-folders.html">
      
        <option value="en" selected>English</option>
      
        <option value="zh-tw">正體中文</option>
      
        <option value="zh-cn">简体中文</option>
      
        <option value="ru">Русский</option>
      
        <option value="ko">한국어</option>
      
    </select>
  </div>
</nav>
  <!-- Scripts -->
<!-- build:js build/js/main.js -->
<script src="/js/lang_select.js"></script>
<script src="/js/toc.js"></script>
<script src="/js/mobile_nav.js"></script>
<!-- endbuild -->

<!-- Algolia -->

<script type="text/javascript" src="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.js"></script>
<script type="text/javascript">
document.getElementById('search-input-wrap').classList.add('on');
docsearch({
  apiKey: 'c3d5d4c995b5e0c2ffb5623900279a66',
  indexName: 'hexo',
  inputSelector: '#search-input'
});
</script>


</body>
</html>